<template>
  <view class="activity-container">
    <!-- 顶部导航栏 -->
    <!-- <view class="nav-header">
      <view class="back-btn" @tap="navigateBack">
        <uni-icons type="back" size="24" color="#4D3F33"></uni-icons>
      </view>
      <text class="page-title">打卡动态</text>
      <view class="placeholder"></view>
    </view> -->

    <!-- 动态列表 -->
    <scroll-view
      class="activity-list"
      scroll-y
      @scrolltolower="loadMoreActivities"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refreshActivities"
    >
      <view
        v-for="(activity, index) in activities"
        :key="index"
        class="activity-item"
      >
        <view class="activity-user">
          <image
            class="user-avatar"
            :src="activity.user.avatarUrl"
            @tap="navigateToUserProfile(activity.userId)"
          ></image>
          <view class="user-info">
            <view class="user-name-row">
              <text class="user-name">{{ activity.user.nickName }}</text>
              <!-- 关注功能已移除 -->
            </view>
            <view class="activity-meta">
              <text class="activity-time">{{ activity.create_time }}</text>
              <text class="activity-day-count" v-if="activity.dayCount"
                >第{{ activity.days }}天</text
              >
            </view>
          </view>
        </view>

        <text class="activity-content">{{ activity.context }}</text>

        <!-- 图片网格：根据图片数量自动调整布局 -->
        <view
          class="activity-images"
          v-if="activity.imgs && activity.imgs.length > 0"
        >
          <view
            :class="getImageContainerClass(activity.imgs.length)"
            v-for="(image, imgIndex) in activity.imgs"
            :key="imgIndex"
            @tap="previewImages(activity.imgs, imgIndex)"
          >
            <image :src="image" mode="aspectFill"></image>
          </view>
        </view>

        <!-- 音频播放器已移除 -->

        <!-- 位置信息 -->
        <view
          class="activity-location"
          v-if="activity.address_name"
          @tap="openLocation(activity)"
        >
          <view class="location-icon">
            <uni-icons type="location" size="18" color="#78A77F"></uni-icons>
          </view>
          <text class="location-text">{{ activity.address_name }}</text>
        </view>

        <!-- 点赞、评论、分享操作栏 -->
        <!-- <view class="activity-actions">
          <view class="action-item" @tap="likeActivity(index)">
            <uni-icons
              :type="activity.liked ? 'heart-filled' : 'heart'"
              size="22"
              :color="activity.liked ? '#E2C675' : '#A89B88'"
            ></uni-icons>
            <text :class="activity.liked ? 'active-text' : ''">{{
              activity.likes
            }}</text>
          </view>
          <view class="action-item" @tap="navigateToComment(index)">
            <uni-icons type="chat" size="22" color="#A89B88"></uni-icons>
            <text>{{ activity.comments }}</text>
          </view>
        </view> -->

        <!-- 评论预览 -->
        <!-- <view
          class="comment-preview"
          v-if="activity.commentList && activity.commentList.length > 0"
        >
          <view
            v-for="(comment, commentIndex) in activity.commentList.slice(0, 2)"
            :key="commentIndex"
            class="preview-comment"
          >
            <text class="comment-user">{{ comment.username }}：</text>
            <text class="comment-text">{{ comment.content }}</text>
          </view>
          <view
            class="view-all-comments"
            v-if="activity.comments > 2"
            @tap="viewAllComments(index)"
          >
            <text>查看全部{{ activity.comments }}条评论</text>
            <uni-icons type="right" size="14" color="#A89B88"></uni-icons>
          </view>
        </view> -->

        <!-- 添加评论按钮 -->
        <!-- <view class="add-comment-btn" @tap="showCommentInput(index)">
          <uni-icons type="chatboxes" size="18" color="#78A77F"></uni-icons>
          <text>添加评论...</text>
        </view> -->
      </view>

      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="isLoading">
        <view class="loading-spinner"></view>
        <text>加载更多...</text>
      </view>

      <!-- 没有更多数据提示 -->
      <view class="no-more-data" v-if="noMoreData && activities.length > 0">
        <text>— 已经到底啦 —</text>
      </view>

      <!-- 空数据提示 -->
      <view class="empty-data" v-if="activities.length === 0 && !isLoading">
        <image class="empty-icon" src="/static/icons/empty-data.png"></image>
        <text>暂无动态</text>
        <view class="refresh-btn" @tap="refreshActivities">刷新试试</view>
      </view>
    </scroll-view>

    <!-- 返回顶部按钮 -->
    <view class="back-to-top" v-if="showBackToTop" @tap="scrollToTop">
      <image src="/static/icons/arrow-up.png"></image>
    </view>

    <!-- 评论输入框弹窗 -->
    <view class="comment-modal" v-if="showCommentBox">
      <view class="modal-mask" @tap="hideCommentInput"></view>
      <view class="comment-box">
        <view class="comment-input-area">
          <input
            class="comment-input"
            v-model="commentText"
            placeholder="写评论..."
            ref="commentInput"
            confirm-type="send"
            @confirm="submitComment"
          />
          <view class="send-btn" @tap="submitComment">发送</view>
        </view>
      </view>
    </view>

    <!-- 所有评论弹窗 -->
    <view class="all-comments-modal" v-if="showAllComments">
      <view class="modal-mask" @tap="closeAllComments"></view>
      <view class="all-comments-container">
        <view class="all-comments-header">
          <text
            >全部评论 ({{
              currentCommentsIndex >= 0
                ? activities[currentCommentsIndex].comments
                : 0
            }})</text
          >
          <view class="modal-close" @tap="closeAllComments">×</view>
        </view>
        <scroll-view class="comments-list" scroll-y>
          <view
            v-for="(comment, commentIndex) in currentCommentsIndex >= 0
              ? activities[currentCommentsIndex].commentList
              : []"
            :key="commentIndex"
            class="comment-item"
          >
            <text class="comment-user">{{ comment.username }}</text>
            <text class="comment-content">{{ comment.content }}</text>
          </view>
          <view
            class="no-more-comments"
            v-if="
              currentCommentsIndex >= 0 &&
              activities[currentCommentsIndex].commentList.length === 0
            "
          >
            <text>暂无评论，快来发表第一条评论吧</text>
          </view>
        </scroll-view>
        <view class="comment-input-area">
          <input
            class="comment-input"
            v-model="commentText"
            placeholder="写评论..."
            confirm-type="send"
            @confirm="submitComment"
          />
          <view class="send-btn" @tap="submitComment">发送</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getSignListApi } from "../../api/user";
export default {
  data() {
    return {
      activities: [], // 动态列表
      isLoading: false, // 是否正在加载更多
      isRefreshing: false, // 是否正在下拉刷新
      page: 1, // 当前页码
      pageSize: 10, // 每页加载数量
      noMoreData: false, // 是否没有更多数据
      showBackToTop: false, // 是否显示返回顶部按钮
      showShareModal: false, // 是否显示分享弹窗
      currentShareIndex: -1, // 当前要分享的动态索引

      // 评论相关
      showCommentBox: false, // 是否显示评论输入框
      currentCommentIndex: -1, // 当前评论的动态索引
      commentText: "", // 评论内容

      // 查看所有评论
      showAllComments: false, // 是否显示所有评论弹窗
      currentCommentsIndex: -1, // 当前查看所有评论的动态索引
    };
  },
  onLoad() {
    this.init();
  },
  onUnload() {
    // 页面卸载时释放资源
  },
  onPageScroll(e) {
    // 监听页面滚动
    this.showBackToTop = e.scrollTop > 300;
  },
  methods: {
    init() {
      this.page = 1;
      this.activities = [];
      this.isLoading = false;
      this.noMoreData = false;
      this.loadActivities();
    },
    // 加载动态列表
    loadActivities() {
      if (this.isLoading || this.noMoreData) return;

      this.isLoading = true;

      getSignListApi({
        page: this.page,
        page_size: this.pageSize,
      }).then((res) => {
        this.activities = [...this.activities, ...res.data];
        this.isLoading = false;
        this.noMoreData = res.last_page <= this.page;
        this.page++;
        this.isRefreshing = false;
      });
    },

    // 加载更多动态
    loadMoreActivities() {
      this.loadActivities();
    },

    // 下拉刷新
    refreshActivities() {
      this.isRefreshing = true;
      this.init();
    },

    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 获取图片容器的类名（根据图片数量）
    getImageContainerClass(count) {
      if (count === 1) return "image-single";
      if (count <= 3) return "image-three";
      return "image-grid";
    },

    // 预览图片
    previewImages(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current],
      });
    },

    // 音频相关方法已移除

    // 打开位置
    openLocation(location) {
      uni.openLocation({
        latitude: location.latitude,
        longitude: location.longitude,
        name: location.address_name,
      });
    },

    // 点赞动态
    likeActivity(index) {
      const activity = this.activities[index];

      if (activity.liked) {
        activity.likes--;
      } else {
        activity.likes++;
      }

      activity.liked = !activity.liked;
    },

    // 跳转到评论页面 - 改为显示本地评论输入框
    navigateToComment(index) {
      this.showCommentInput(index);
    },

    // 跳转到用户资料页
    navigateToUserProfile(userId) {
      return false;
      uni.navigateTo({
        url: `/pages/user/profile?id=${userId}`,
      });
    },

    // 显示评论输入框
    showCommentInput(index) {
      this.currentCommentIndex = index;
      this.showCommentBox = true;
      this.$nextTick(() => {
        this.$refs.commentInput.focus();
      });
    },

    // 提交评论
    submitComment() {
      if (!this.commentText.trim()) {
        uni.showToast({
          title: "评论内容不能为空",
          icon: "none",
        });
        return;
      }

      const index = this.currentCommentIndex;
      const activity = this.activities[index];

      // 添加新评论
      const newComment = {
        username: "我", // 假设当前用户名为"我"
        content: this.commentText.trim(),
      };

      // 如果没有评论列表，创建一个
      if (!activity.commentList) {
        activity.commentList = [];
      }

      activity.commentList.push(newComment);
      activity.comments++;

      // 清空评论框并隐藏
      this.commentText = "";
      this.hideCommentInput();

      uni.showToast({
        title: "评论成功",
        icon: "success",
      });
    },

    // 隐藏评论输入框
    hideCommentInput() {
      this.showCommentBox = false;
      this.currentCommentIndex = -1;
    },

    // 查看所有评论
    viewAllComments(index) {
      this.currentCommentsIndex = index;
      this.showAllComments = true;
    },

    // 关闭所有评论弹窗
    closeAllComments() {
      this.showAllComments = false;
      this.currentCommentsIndex = -1;
    },

    // 分享动态
    shareActivity(index) {
      this.currentShareIndex = index;
      this.showShareModal = true;
    },

    // 关闭分享弹窗
    closeShareModal() {
      this.showShareModal = false;
      this.currentShareIndex = -1;
    },

    // 分享到微信
    shareToWechat() {
      // 实际开发中应调用微信分享API
      uni.showToast({
        title: "已分享到微信",
        icon: "success",
      });
      this.closeShareModal();
    },

    // 分享到朋友圈
    shareToMoments() {
      // 实际开发中应调用微信分享API
      uni.showToast({
        title: "已分享到朋友圈",
        icon: "success",
      });
      this.closeShareModal();
    },

    // 分享到微博
    shareToWeibo() {
      // 实际开发中应调用微博分享API
      uni.showToast({
        title: "已分享到微博",
        icon: "success",
      });
      this.closeShareModal();
    },

    // 复制链接
    copyLink() {
      uni.setClipboardData({
        data: `https://yourapp.com/activity/${
          this.activities[this.currentShareIndex].userId
        }`,
        success: () => {
          uni.showToast({
            title: "链接已复制",
            icon: "success",
          });
        },
      });
      this.closeShareModal();
    },

    // 滚动到顶部
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
  },
};
</script>

<style>
.activity-container {
  background-color: #f8f6f1; /* 米白色背景 */
  min-height: 100vh;
}

/* 顶部导航栏 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.back-btn image {
  width: 40rpx;
  height: 40rpx;
}

.page-title {
  font-size: 32rpx;
  color: #4d3f33;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.placeholder {
  width: 60rpx;
}

/* 动态列表 - 调整了高度以补偿移除的筛选栏 */
.activity-list {
  height: calc(100vh - 90rpx);
}

.activity-item {
  margin: 20rpx 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  overflow: hidden;
}

/* 用户信息 */
.activity-user {
  display: flex;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.user-info {
  flex: 1;
}

.user-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rpx;
}

.user-name {
  font-size: 28rpx;
  color: #4d3f33;
  font-weight: bold;
}

/* 添加评论按钮 */
.add-comment-btn {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  margin-top: 10rpx;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
}

.add-comment-btn text {
  font-size: 26rpx;
  color: #75695c;
  margin-left: 10rpx;
}

/* 评论输入框弹窗 */
.comment-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.modal-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.comment-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.comment-input-area {
  display: flex;
  align-items: center;
}

.comment-input {
  flex: 1;
  height: 80rpx;
  background-color: #f8f6f1;
  border-radius: 40rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #4d3f33;
}

.send-btn {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #78a77f;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 40rpx;
  margin-left: 20rpx;
}

/* 所有评论弹窗 */
.all-comments-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.all-comments-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  height: 70vh;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.all-comments-header {
  position: relative;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.all-comments-header text {
  font-size: 30rpx;
  color: #4d3f33;
  font-weight: bold;
}

.modal-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  font-size: 40rpx;
  color: #a89b88;
  line-height: 1;
}

.comments-list {
  flex: 1;
  padding: 20rpx 30rpx;
}

.comment-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.comment-item .comment-user {
  font-size: 28rpx;
  color: #4d3f33;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.comment-item .comment-content {
  font-size: 28rpx;
  color: #4d3f33;
  line-height: 1.5;
}

.no-more-comments {
  padding: 40rpx 0;
  text-align: center;
}

.no-more-comments text {
  font-size: 28rpx;
  color: #a89b88;
}

.activity-meta {
  display: flex;
  align-items: center;
}

.activity-time {
  font-size: 22rpx;
  color: #a89b88;
  margin-right: 16rpx;
}

.activity-day-count {
  font-size: 22rpx;
  color: #e2c675; /* 佛经黄 */
  background-color: rgba(226, 198, 117, 0.1);
  padding: 4rpx 10rpx;
  border-radius: 20rpx;
}

/* 动态内容 */
.activity-content {
  font-size: 28rpx;
  color: #4d3f33;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

/* 图片样式 */
.activity-images {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5rpx 20rpx;
}

.image-single {
  width: 100%;
  height: 400rpx;
  padding: 5rpx;
}

.image-double {
  width: 33.33%;
  height: 240rpx;
  padding: 5rpx;
}

.image-three {
  width: 33.33%;
  height: 240rpx;
  padding: 5rpx;
}

.image-grid {
  width: 25%;
  height: 200rpx;
  padding: 5rpx;
}

.activity-images image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

/* 音频播放器样式已移除 */

/* 位置信息 */
.activity-location {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 12rpx;
  padding: 14rpx 20rpx;
  margin-bottom: 20rpx;
}

.location-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.location-icon image {
  width: 100%;
  height: 100%;
}

.location-text {
  font-size: 24rpx;
  color: #75695c;
}

/* 操作栏 */
.activity-actions {
  display: flex;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  padding-top: 20rpx;
  margin-bottom: 20rpx;
}

.action-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}

.action-item image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.action-item text {
  font-size: 24rpx;
  color: #a89b88;
}

.action-item .active-text {
  color: #e2c675; /* 佛经黄 */
}

/* 评论预览 */
.comment-preview {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
}

.preview-comment {
  margin-bottom: 10rpx;
}

.comment-user {
  font-size: 24rpx;
  color: #78a77f; /* 青瓷绿 */
  font-weight: bold;
}

.comment-text {
  font-size: 24rpx;
  color: #4d3f33;
}

.view-all-comments {
  text-align: center;
  margin-top: 10rpx;
}

.view-all-comments text {
  font-size: 24rpx;
  color: #a89b88;
}

/* 加载更多 */
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid rgba(120, 167, 127, 0.2); /* 青瓷绿透明 */
  border-top-color: #78a77f; /* 青瓷绿 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10rpx;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-more text {
  font-size: 24rpx;
  color: #a89b88;
}

/* 没有更多数据 */
.no-more-data {
  text-align: center;
  padding: 30rpx 0;
}

.no-more-data text {
  font-size: 24rpx;
  color: #a89b88;
}

/* 空数据 */
.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 150rpx;
  height: 150rpx;
  margin-bottom: 30rpx;
}

.empty-data text {
  font-size: 28rpx;
  color: #a89b88;
  margin-bottom: 30rpx;
}

.refresh-btn {
  width: 200rpx;
  height: 70rpx;
  background-color: #78a77f; /* 青瓷绿 */
  color: #ffffff;
  font-size: 26rpx;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  right: 30rpx;
  bottom: 80rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
}

.back-to-top image {
  width: 36rpx;
  height: 36rpx;
}

/* 分享弹窗 */
.share-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.modal-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.share-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
}

.share-header {
  position: relative;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.share-header text {
  font-size: 30rpx;
  color: #4d3f33;
}

.modal-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  font-size: 40rpx;
  color: #a89b88;
  line-height: 1;
}

.share-options {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx;
}

.share-option {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.share-option image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 16rpx;
}

.share-option text {
  font-size: 24rpx;
  color: #4d3f33;
}

.cancel-btn {
  padding: 30rpx 0;
  text-align: center;
  font-size: 30rpx;
  color: #4d3f33;
  border-top: 8rpx solid #f8f6f1;
}
</style>
